<template>
  <div class="login-box">

    <div class="login">
      <p class="title">{{ current === 'loginScreen' ? '登录界面' : '注册界面' }}</p>
      <component class="login-content" :form="form" :rules="rules" :is="current" @change-nav="handleNav"> </component>
      <loginNav :index="current" @change-nav="handleNav" />
    </div>
  </div>
</template>

<script>
import loginNav from './login/LoginNav'
import loginScreen from './login/LoginScreen'
import registerScreen from './login/RegisterScreen'
export default {
  components: {
    loginNav,
    loginScreen,
    registerScreen
  },
  data () {
    return {
      form: {
        username: '',
        password: '',
        cPassword: ''
      },
      current: 'loginScreen',
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        cPassword: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          {
            validator: (rules, value, callback) => {
              const pwd = this.form.password.trim()
              const cpwd = this.form.cPassword.trim()
              if (pwd === cpwd) {
                return callback()
              } else {
                return callback(new Error('两次密码不一致'))
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleNav (val) {
      this.current = val
      this.form = {}
    }
  }
}
</script>

<style lang="less" scoped>
.login-box {
  background-color: #f7edd5;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login {
  width: 400px;
  padding: 40px;
  background-color: #fff;
}

.warpper {
  // width: 400px;

  [class$='-screen'] {
    margin-top: 16px;

    /deep/.el-button {
      width: 100%;
    }
  }
}

/deep/.el-input__inner {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;

  &:hover {
    border-color: #eba613;
  }
}

/deep/.el-input__icon {
  color: #777;
}

.login-content {
  height: 400px;
  width: 400px;
}

.title {
  font-size: 25px;
  color: #000;
  margin-bottom: 40px;
  letter-spacing: 8px;
  text-align: center;
}
</style>
